<template>
  <view class="detail">
    <nav-bar title="巡查巡检" leftArrow></nav-bar>
    <view class="universal-head">
      <view class="universal-head-title">{{ detail.lineName }}</view>
      <!-- <view class="universal-status" :class="detail.patrolStatus === '1' && 'universal-status-on'">{{detail.patrolStatusStr || '-'}}</view> -->
    </view>
    <view class="universal-detail">
      <view class="universal-detail-cont">
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">线路类别：</view>
          <view class="universal-detail-item-cont">{{ detail.lineLabel || '-' }}</view>
        </view>
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">巡查人员：</view>
          <view class="universal-detail-item-cont">{{ detail.checkerName || '-' }}</view>
        </view>
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">巡检类型：</view>
          <view class="universal-detail-item-cont">{{ detail.lineType.label || '-' }}</view>
        </view>
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">点位数：</view>
          <view class="universal-detail-item-cont">{{ itemList.length || '0' }}</view>
        </view>
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">开始时间：</view>
          <view class="universal-detail-item-cont">{{ detail.startTime || '-' }}</view>
        </view>
        <view class="universal-detail-item">
          <view class="universal-detail-item-title">结束时间：</view>
          <view class="universal-detail-item-cont">{{ detail.endTime || '-' }}</view>
        </view>
      </view>
    </view>
    <view class="detail-map">
      <map-patrol :polyline="checkList"></map-patrol>
    </view>
    <van-collapse v-model="actives">
      <van-collapse-item v-for="item in itemList" :title="item.itemTitle" :name="item.lineItemId">
        <collapse-form v-if="item.dangerFlag.value === '2'" :detail="item" @getDetail="getPatrolTaskItemDetail"></collapse-form>
        <collapse-detail v-else :detail="item"></collapse-detail>
      </van-collapse-item>
    </van-collapse>
    <view class="detail-bottom">
      <van-button @click="goLink('back')" class="detail-bottom-button-cancel" type="default">返回</van-button>
      <van-button 
        @click="onDialogDelete" class="detail-bottom-button-cancel" type="danger"
        :loading="loading.delete" loading-text="删除中..."
      >删除</van-button>
      <van-button v-if="!detail.finishTime"
        @click="onValid" class="detail-bottom-button-submit" type="primary"
        :loading="loading.finish" loading-text="提交中..."
      >完成巡检</van-button>
    </view>
  </view>
</template>

<script setup>
  import { showConfirmDialog } from 'vant';
  import collapseForm from './components/collapse-form';
  import collapseDetail from './components/collapse-detail';
  import dayjs from 'dayjs';
  import { ref } from 'vue';
  import { apiPatrolTaskDetail, apiPatrolTaskItemDetail, apiPatrolTaskValid, apiPatrolTaskItemFinish, apiPatrolLineDetail, apiPatrolTaskDel } from '@/api/patrolInspect';
  import { splitFilesToImageVideo } from '@/utils/index'
  
  const path = defineProps({
    id: String,
    lineId: String
  })
  const actives = ref([]);
  const detail = ref({
    dangerFlag: {},
    finishTime: '2025'
  });
  const itemList = ref([]);
  const checkList = ref([]);
  const loading = ref({
    delete: false,
    finish: false,
  });

  const goLink = (type) => {
    type === 'back' && uni.navigateBack({ delta: 1 })
  }
  // 验证是否完成巡检点
  const onValid = () => {
    loading.value.finish = true;
    apiPatrolTaskValid({
      value: path.id
    }).then(res => {
      if (res) {
        onFinish();
      } else {
        showConfirmDialog({
          title: '巡查巡检',
          message: '还有未完成的巡查点，确定提交完成巡检吗？',
          })
          .then(() => {
            onFinish();
          })
          .catch(() => {
            loading.value.finish = false;
          });
      }
    })
  };
  // 完成所有巡检点
  const onFinish = () => {
    apiPatrolTaskItemFinish({
      value: path.id
    }).then(res => {
      uni.showToast({
        title: '已完成所有点位巡查',
        icon: 'success',
        mask: true
      })
      loading.value.finish = false;
      uni.navigateTo({ url: '/pages/patrolInspect/index' })
    })
  };

  // 二次确认删除巡检
  const onDialogDelete = () => {
    loading.value.delete = true;
    showConfirmDialog({
      title: '删除巡查巡检',
      message: '确定删除这条巡查巡检吗？',
      })
      .then(() => {
        onDelete();
      })
      .catch(() => {
        loading.value.delete = false;
      });
  };
  // 删除巡检
  const onDelete = () => {
    apiPatrolTaskDel({
      value: path.id
    }).then(res => {
      uni.showToast({
        title: '删除成功',
        icon: 'success',
        mask: true
      })
      loading.value.delete = false;
      uni.navigateTo({ url: '/pages/patrolInspect/index' })
    })
  };

  // 获取巡检任务详情
  const getPatrolTaskDetail = () => {
    apiPatrolTaskDetail({
      value: path.id
    }).then(res => {
      detail.value = res;
    });
  };
  // 获取巡检点列表详情
  const getPatrolTaskItemDetail = () => {
    apiPatrolTaskItemDetail({
      value: path.id
    }).then(res => {
      itemList.value = res.map(n => {
        const urls = splitFilesToImageVideo(n.convertCheckPicUrl);
        const troubleUrl = n.trouble ? splitFilesToImageVideo(n.trouble.convertPicUrl) : {};
        const troubleFixUrl = n.trouble ? splitFilesToImageVideo(n.trouble.convertFinishPic) : {};
        return {
          ...n, 
          itemTitle: `${n.checkName}（${n.dangerFlag ? n.dangerFlag.label : '-'}）`,
          imageUrl: urls.images,
          videoUrl: urls.videos,
          trouble: {
            ...n.trouble,
            imageBefore: troubleUrl.images,// 维修前图片
            videoBefore: troubleUrl.videos,// 维修前视频
            imageAfter: troubleFixUrl.images, // 处置后图片
            videoAfter: troubleFixUrl.videos, // 处置后视频
          },
        }
      });
    });
  }
  // 获取点位
  const getPatrolLineDetail = () => {
    apiPatrolLineDetail({
      value: path.lineId
    }).then(res => {
      checkList.value = res.planVOS;
    });
  }
  getPatrolLineDetail();
  getPatrolTaskItemDetail();
  getPatrolTaskDetail();
</script>

<style lang="scss" scoped>
@import '@/assets/universal-page.scss';
@import '@/assets/universal-detail.scss';
@import '@/assets/universal-list.scss';

.detail {
  .detail-map {
    margin: 0 20rpx 30rpx;
    height: 600rpx;
    border-radius: 20rpx;
  }
  .detail-bottom {
    margin-top: 30rpx;
    padding: 0 30rpx 60rpx;
    display: flex;
    gap:30rpx;
  }
  .detail-bottom-button-cancel {
    width: 200rpx;
  }
  .detail-bottom-button-submit {
    flex: 1;
  }

}
</style>